import { getAdaptiveImgHeight, transformConfig } from '@/utils/customModule';
import { Image, View } from '@tarojs/components';
import React, { useEffect, useState } from 'react';
import { navigateTo } from '../utils';
import './index.scss';

const styleConfig = {
  imgItem: {
    borderRadius: 'borderRadius',
    marginRight: 'imgMargin',
  },
};

const ModuleImgHorizontal = ({ imgUrlList, styleSettingRender }) => {
  const style = transformConfig(styleSettingRender, styleConfig);

  const [imgHeight, setImgHeight] = useState();
  useEffect(() => {
    if (!imgUrlList?.length) {
      return;
    }

    setImgHeight(getAdaptiveImgHeight(imgUrlList, -30 * (imgUrlList.length - 1)));
  }, [imgUrlList]);

  return (
    <View className="ModuleImgHorizontal">
      <View className="img-container" style={style.module}>
        {imgUrlList?.map(({ imageUrl, url }) => {
          return (
            <View
              className="img-item"
              key={imageUrl}
              style={{ ...style.imgItem, height: `${imgHeight}px` }}
              onClick={() => {
                if(!url || url == '#') return;
                navigateTo(url);
              }}
            >
              <Image className="img" src={imageUrl} mode="aspectFill" />
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default ModuleImgHorizontal;
